<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>love</title>
    <script src = "jquery.min.js"></script>
</head>
<body>
    <div style="text-align: center;">
        <h1 style="text-align: center;color: brown;">表白墙</h1>
        输入后点击提交按钮即可
        <p></p>
        发送方 : <input id = "send" type="text">
        <br><br>
        接收方 : <input id = "receive" type="text">
        <br><br>
        say : <input id = "word" type="text">
        <br><br>
        <input style = "color: burlywood;" type="button" value = "提交" onclick="print();">


    </div>
    <div id = "wall" style = "text-align: center;">
        <h1>收到的表白信息</h1>
    </div>
    <script>
        function print() {
            var send = jQuery("#send").val();
            var receive = jQuery("#receive").val();
            var word = jQuery("#word").val();
            
            var msg = "<h3>" + send + "对" + receive + "说了" + word + "<h3>";
            jQuery("#wall").append(msg);
            // 对一整块进行修改
            jQuery("#send").val("");
            jQuery("#receive").val("");
            jQuery("#word").val("");

            $.ajax({
                type : 'post',
                url : "love",
                contentType:"application/json;charset=utf8",
                data :JSON.stringify(bosy),
                success: function(body) {
                    console.log("消息发送成功");
                }
            });


            $.ajax({
                type : 'post',
                url : 'love',
                success : function (body) {
                    // 由于响应的是json,所以此时收到的body会被jquery自动从字符串转成js对象数组,所以此处不需要手动的转换
                    
                    for (let messaege of body) {
                        let rowDIv = document.createElement('div');
                        rowDIv.className = "row";
                        rowDIv.innerHTML = messaege.f
                    }

                }
            });

        }


    </script>
</body>
</html>